<template id="child-slot-example">
  <!-- only one root node -->
  <div>
    <h2>I'm the slot child</h2>
    slot01:<slot name="slot-01"> if no content then show this message. </slot>
    <p />
    slot default:
    <!-- 如果slot没有定义name，则默认为：name="default" -->
    <slot> no matched show here! </slot>
    <p />
    <span style="color:red">
      slot scope!!!:
      <!-- 后备内容（默认值）它只会在没有提供内容的时候被渲染 -->
      <slot name="user-info" :userInfo="user">{{ user.lastName }}</slot>
    </span>
  </div>
</template>

<script>
export default {
  name: 'my-slot-component',
  data() {
    return {
      user: {
        firstName: 'firstName',
        lastName: 'lastName',
      },
    };
  },
};
</script>
